<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单搜索框 -->
    <el-form ref="form" :inline="true" style="margin-top: 20px;">
      <span>状态：</span>
      <el-button-group style="margin-left: 10px ;">
        <el-button>全部服务</el-button>
        <el-button>上架中</el-button>
        <el-button>已下架</el-button>
      </el-button-group>
      <el-form-item label="服务名字" style="margin-left: 10px;">
        <el-input v-model="service.domesticServiceName" placeholder="请输入内容" size="small"
                  style="width: 200px;margin-right: 10px;"></el-input>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" size="small"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" style="margin-left: 10px;"
                   @click="querySearchBulkGoodsList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" style="margin-left: 10px;">添加商品</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <template>
      <el-table :data="serviceList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
        <el-table-column prop="domesticServiceId" label="服务ID">
        </el-table-column>
        <el-table-column prop="domesticServiceName" label="服务名字">
        </el-table-column>
        <el-table-column prop="domesticServiceImage" label="服务照片">
        </el-table-column>
        <el-table-column prop="salesVolume" label="销量">
        </el-table-column>
        <el-table-column prop="virtualSales" label="虚拟销量">
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-show="scope.row.domesticServiceStatus==1">已上架</el-tag>
            <el-tag type="danger" v-show="scope.row.domesticServiceStatus==0">已下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" style="font-size: 12px;"
                     v-show="scope.row.domesticServiceStatus==0"
                     @click="sg(scope.row.domesticServiceId)">立即上架<br /></el-link>
            <el-link :underline="false" type="primary" style="font-size: 12px;"
                     v-show="scope.row.domesticServiceStatus==1"
                     @click="xg(scope.row.domesticServiceId)">立即下架<br /></el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="service.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="service.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      service: {
        domesticServiceName: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 5,
      },
      date: '',
      serviceList: [],
      total: 0,
      title: '',
      show:false,
      // serviceData: {
      //   domesticServiceId: '',
      //   domesticServiceStatus: '',
      // },
      bulkGoodsId:''
    }
  },
  methods: {
    //取消
    concel(){
      this.shopData={
        bulkGoodsId: '',
        bulkGoodsStatus: '',
        buyEndTime: "",
        buyStartTime:'',
        virtualSales:'',
      }
      this.show=false

    },
    //上架
    sg(id){
      this.$http.post('domestic/modifyDomesticService', {
        domesticServiceId: id,
        domesticServiceStatus: 1,
      })
          .then(res => {
            if (res.data.status == 200) {
              this.querySearchDomesticServiceList()
              this.$message.success('上架成功!')
            }
          });
    },
    //下架
    xg(id) {
      this.$http.post('domestic/modifyDomesticService', {
        domesticServiceId: id,
        domesticServiceStatus: 0,
      })
          .then(res => {
            if (res.data.status == 200) {
              this.querySearchDomesticServiceList()
              this.$message.success('下架成功!')
            }
          })
    },
    querySearchDomesticServiceList() {
      this.$http.get('domestic/querySearchDomesticServiceList', {
        params: this.service
      })
          .then(res => {
            if (res.data.status == 200) {
              this.serviceList = res.data.data.list
              this.total = res.data.data.total
            } else {
              this.$message.error('服务器接口异常！')
            }
          })
          .catch(error => {
            this.$message.error('服务器接异常！')
          })
    },

    handleSizeChange(val) {
      this.service.pageSize = val;
      this.service.pageNum = 1
      this.querySearchDomesticServiceList()
    },

    handleCurrentChange(val) {
      this.service.pageNum = val;
      this.querySearchDomesticServiceList()
    }
  },
  mounted() {
    this.querySearchDomesticServiceList()
  }
}
</script>

<style>
</style>